<template>
	<view class="">
		<view class="container" v-if="data && data.id">
			<!-- "status": 1, //上架状态 1待发布 2发布中 3已下架	 -->
			<!--  `status` '审核状态 1待发布 2审核中 3审核通过 4审核驳回',
 		  `status_up` '上架状态 1待发布 2发布中 3已下架', -->
			<view class="order-top" v-if="data.status_up==1">
				<view class="t">
					待发布
				</view>
				<view class="p">
					报价审核通过后，会自动上架
				</view>
			</view>
			<view class="order-top" v-if="data.status_up==2">
				<view class="t">
					发布中
				</view>
				<view class="p">
					<text>{{result.countdown}}</text>后自动下架
				</view>
			</view>
			<view class="order-top" v-if="data.status_up==3">
				<view class="t">
					已下架
				</view>
				<view class="p">
					报价已自动下架，可再次提交上架
				</view>
			</view>
			<view class="record u-flex u-col-center u-row-between"
				@click="$pageTo(`/pages/user/order/billList?id=${id}`)">
				<view class="l u-flex u-col-center">
					<image src="@/static/hs.png" mode="aspectFill"></image>
					<text>报价记录</text>
				</view>
				<view class="r">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="goods">
				<view class="title">
					{{data.type==1?'我要收购':'我要出售'}}
				</view>
				<view class="img-con u-flex u-col-top u-row-between">
					<view class="img">
						<image :src=" data.image" mode="aspectFill" v-if="data.image"></image>
						<image :src="webconfigImg"  mode="aspectFill" v-else></image>
					</view>
					<view class="con">
						<view class="name u-line-2">
							{{data.name}}
						</view>
						<view class="price" v-if="data.price">
							<text class="p"
								:class="{'p1':getPriceLength(data.price)<6,'p2':getPriceLength(data.price)==6,'p3':getPriceLength(data.price)==7,'p4':getPriceLength(data.price)==8,'p5':getPriceLength(data.price)>=9,}">{{$numToLocaleString(data.price)}}</text>
							<text class="y">{{data.priceUnit == 0?'MHB':'元'}}</text>

						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						查看次数
					</view>
					<view class="r">
						{{data.number}}次
					</view>
				</view>
			</view>
			<view class="list">

				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						审核状态
					</view>
					<view class="r">
						{{statuss[data.status]}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between" v-if="data.status == 3 || data.status == 4">
					<view class="l">
						审核说明
					</view>
					<view class="r">
						{{data.check_desc||""}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						创建时间
					</view>
					<view class="r">
						{{data.create_time|formatISODate}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between" v-if="data.status>1">
					<view class="l">
						提审时间
					</view>
					<view class="r">
						{{data.arraign_time|formatISODate }}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between" v-if="data.status == 3 || data.status == 4">
					<view class="l">
						{{data.status==3?'发布时间':'审核时间'}}
					</view>
					<view class="r">
						{{data.check_time|formatISODate }}
					</view>
				</view>
			</view>
		</view>
		<!-- 删除  待发布&&不是审核通过的  -->
		<!-- 编辑  待发布&&（待发布||审核驳回）||  已下架&&审核通过  -->
		<!-- 待发布 -->
		<uni-popup ref="popup" type="center">
			<view class="m-pop2">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<view class="t">
					商品改价
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						原价<text>{{data.priceUnit == 0?'(MHB)':'(元)'}}</text>
					</view>
					<view class="r price" v-if="data.price">
						<text class="p"
							:class="{'p1':getPriceLength(data.price)<6,'p2':getPriceLength(data.price)==6,'p3':getPriceLength(data.price)==7,'p4':getPriceLength(data.price)==8,'p5':getPriceLength(data.price)>=9,}">{{$numToLocaleString(data.price)}}</text>

						<text class="y">{{data.priceUnit == 0?'MHB':'元'}}</text>
					</view>
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						改价<text>{{data.priceUnit == 0?'(MHB)':'(元)'}}</text>
					</view>
					<view class="r">
						<input maxlength="9" v-model="number" type="number" placeholder="请输入"
							placeholder-style="font-size: 28rpx;color: #D1D1D6;" />
						<view class="big" v-if="number">
							{{ number | numberToChinese(data.priceUnit) }}
						</view>
					</view>
				</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close">
						取消
					</view>
					<view class="btn btn2" @click="quotationPrice">
						确认改价
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="" style="height: 200rpx;"></view>
		<view class="f-btns" v-if="data.status_up==1">
			<view class="cont u-flex u-col-center u-row-between">
				<view class="u-flex u-col-center u-row-right" style="flex: 1;width: 1rpx;">
					<view class="btn1" @click="handleDelete" v-if="data.status!=3">
						删除
					</view>
					<view class="btn1" @click="handlechexiao" v-if="data.status==2">
						撤销
					</view>
				<!-- 	<view class="btn1" v-if="data.status==1 || data.status==4" @click="quotationUp(data,'edit')">
						编辑
					</view> -->
					
					<view class="btn2" v-if="data.status==1 || data.status==4" @click="quotationUp(data,'edit')">
						重新上架
					</view>
				</view>
				<view class="btn2" @click="quotationArraign" v-if="data.status==1">
					立即发布
				</view>
			</view>
		</view>
		<!-- 上架中 -->
		<view class="f-btns2 " v-if="data.status_up==2 && data.status==3">
			<view class="cont u-flex u-col-center u-row-right">
				<view class="btn1" @click="open" v-if="data.priceMode == 2">
					改价
				</view>
				<view class="btn1" @click="quotationDown">
					下架
				</view>
			</view>
		</view>
		<!-- 已下架 -->
		<view class="f-btns " v-if="data.status_up==3">
			<view class="cont u-flex u-col-center u-row-between">
				<view class="u-flex u-col-center u-row-right" style="flex: 1;width: 1rpx;">
					<view class="btn1" @click="handleDelete" v-if="data.status == 3||data.status == 4">
						删除
					</view>
					<view class="btn1" @click="handlechexiao" v-if="data.status==2">
						撤销
					</view>
					<view class="btn2" @click="quotationUp(data,'edit')" v-if="data.status == 3||data.status == 4">
						重新上架
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		infoQuotationList,
		quotationList,
		removeQuotationList,
		downQuotationList,
		fbQuotationList,
		quotationPrice
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
				index: 3,
				show: false,
				number: '',
				id: 1,
				data: {
					id: ""
				},
				statuss: ['', '待发布', '审核中', '审核通过', '审核失败'], //审核状态 1待发布 2审核中 3审核通过 4审核驳回 -->
				last: {},
				setInterval: null,
				result: {
					offShelfDate: "",
					countdown: ""
				}
			}
		},
		onLoad(o) {
			this.id = o.id
			if (o.show == 1) {
				setTimeout(() => {
					this.$refs.popup.open()
				}, 300)
			}
		},
		onShow() {
			this.getData()
		},
		onUnload() {
			if (this.setInterval) {
				clearInterval(this.setInterval);
				this.setInterval = null;
			}
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			}
		},
		methods: {
			handlechexiao() {
				this.$modal.confirm('是否要撤销当前发布？', '撤销提示').then(() => {
						return usersquotationCancelArraign(this.id)
					}).then(() => {
						this.$modal.msgSuccess('撤销成功')
						this.getData()
					})
					.catch(() => {})
			},
			handleDelete() {
				this.$modal.confirm('是否要删除当前数据？', '删除提示').then(() => {
						return removeQuotationList({
							id: this.id,
							paytype: 2
						})
					}).then(() => {
						this.$modal.msgSuccess('删除成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
					.catch(() => {})
			},
			quotationArraign() {
				this.$modal.confirm('确认要立即发布吗？', '温馨提示').then(() => {
						return fbQuotationList(this.id)
					}).then(() => {
						this.$modal.msgSuccess('发布成功')
						this.getData()
					})
					.catch(() => {})
			},
			// 跳转到编辑
			quotationUp(data, from) {
				let obj = {
					id: data.id,
					status: data.status,
					status_up: data.status_up,
					from
				}
				uni.navigateTo({
					url: '/pages/user/order/editorder?obj=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			quotationDown() {
				this.$modal.confirm('是否要下架当前报价信息？', '下架提示').then(() => {
						return downQuotationList(this.id)
					}).then(() => {
						this.$modal.msgSuccess('下架成功')
						this.getData()
					})
					.catch(() => {})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			quotationPrice() {
				if (!this.number) {
					this.$modal.msg('请输入金额')
					return
				}
				if (this.number.length > 9) {
					this.$modal.msg('金额过大')
					return
				}
				quotationPrice({
					id: this.id,
					price: parseInt(this.number),
					game_zone_name: this.data.game_zone_name,
					account: this.data.account,
					wechat: this.data.wechat
				}).then(res => {
					if (res.code == 200) {
						this.$modal.msg('修改成功')
						this.close()
						this.number = ''
						this.getData()
					}
				})
			},
			getData() {
				infoQuotationList(this.id).then(res => {
					if (res.code == 200) {
						this.data = res.data
						this.last = res.data.last
						let up_time = res.data.last.up_time
						let down_time = res.data.last.down_time
						let upday = res.data.last.upday
						if (up_time && res.data.last.status == 2) {
							this.setInterval = setInterval(() => {
								this.result = this.calculateOffShelfTime(up_time, upday);
							}, 1000)
						}
					}
				})
			},
			calculateOffShelfTime(onShelfDateStr, shelfDays) {
				function padZero(num) {
					return num < 10 ? '0' + num : num;
				}
				// 将上架时间字符串转为 Date 对象
				const onShelfDate = new Date(onShelfDateStr);

				// 计算下架时间（上架时间 + 上架天数）
				const offShelfDate = new Date(onShelfDate);
				offShelfDate.setDate(offShelfDate.getDate() + parseInt(shelfDays));

				// 获取当前时间
				const now = new Date();

				// 计算倒计时（毫秒差）
				let timeDiff = offShelfDate - now;

				if (timeDiff <= 0) {
					return {
						offShelfDate: offShelfDate.toLocaleString(),
						countdown: "已下架"
					};
				}

				// 转换为天、小时、分钟、秒
				const seconds = padZero(Math.floor((timeDiff / 1000) % 60));
				const minutes = padZero(Math.floor((timeDiff / 1000 / 60) % 60));
				const hours = padZero(Math.floor((timeDiff / (1000 * 60 * 60)) % 24));
				const days = padZero(Math.floor(timeDiff / (1000 * 60 * 60 * 24)));
				const countdownStr = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
				return {
					offShelfDate: offShelfDate.toLocaleString(), // 下架时间
					countdown: countdownStr // 倒计时
				};
			},

		}
	}
</script>

<style lang="less" scoped>
	@color: #FF6F07;

	.f-btns2 {
		width: 750rpx;
		min-height: 140rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		box-sizing: border-box;

		.cont {
			width: 710rpx;
			margin: 0rpx auto;
			height: 140rpx;
			box-sizing: border-box;
		}

		.btn1 {
			width: 180rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid #D5D5D5;
			color: #11192D;
			font-size: 30rpx;
			text-align: center;
			margin-left: 20rpx;
		}
	}

	.f-btns {
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		box-sizing: border-box;
		min-height: 140rpx;

		.cont {
			width: 710rpx;
			margin: 0rpx auto;
			height: 140rpx;
			box-sizing: border-box;
		}

		.btn1 {
			width: 180rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid #D5D5D5;
			color: #11192D;
			font-size: 30rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.btn2 {
			max-width: 480rpx;
			min-width: 300rpx;
			height: 100rpx;
			font-size: 30rpx;
			text-align: center;
			color: #fff;
			line-height: 100rpx;
			background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
			border-radius: 20rpx;
		}
	}

	.m-pop2 {
		width: 620rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
		}

		.m-item {
			width: 100%;
			padding: 10rpx 0;
			margin-top: 20rpx;

			.l {
				font-size: 32rpx;
				color: #000000;
				width: 160rpx;

				text {
					font-size: 20rpx;
					margin-left: 5rpx;
				}
			}

			.r {
				flex: 1;
				width: 1rpx;
				text-align: right;
				margin-left: 20rpx;
				position: relative;

				input {
					width: 100%;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #D1D1D6;
					line-height: 68px;
					font-size: 28rpx;
					color: #11192D;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.big {
					position: absolute;
					top: 70rpx;
					right: 0;
					line-height: 40rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: right;
				}
			}

			.price {
				height: 50rpx;
				line-height: 50rpx;

				.p {
					font-family: "DIN";
					font-weight: bold;
					font-size: 36rpx;
					text-align: left;

				}

				.p5 {
					color: #FF70A4;
				}

				.p4 {
					color: #840FFB;
				}

				.p3 {
					color: #FE1515;
				}

				.p2 {
					color: #1EC742;
				}

				.p1 {
					color: #11192D;
				}

				.y {
					color: #979797;
					font-size: 20rpx;
					margin-left: 10rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		.p {
			margin-top: 60rpx;
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;

			text {
				color: @color;
			}
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {

				background: #F9F9F9;
				color: #D1CDCD;
				margin-right: 30rpx;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

			}
		}
	}

	.container {
		padding: 30rpx 30rpx 0rpx;




		.list {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;

			.item {
				padding: 15rpx 0;

				.l {
					font-size: 28rpx;
					color: #979797;
					;
					width: 160rpx;
					height: 40rpx;
					line-height: 40rpx;
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #000000;
					text-align: right;
				}
			}
		}

		.goods {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				color: #11192D;
				height: 40rpx;
				line-height: 40rpx;
			}

			.img-con {
				margin-top: 20rpx;

				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background-color: #F8F8F8;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					image {
						width: 100%;
						height: 100%;
					}

					.no {
						width: 96rpx;
						height: 96rpx;
					}

				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;

					.name {
						color: #11192D;
						font-size: 30rpx;
						line-height: 40rpx;
					}

					.price {
						margin-top: 10rpx;
						height: 50rpx;
						line-height: 50rpx;

						.p {
							font-family: "DIN";
							font-weight: bold;
							font-size: 36rpx;
							text-align: left;

						}

						.p5 {
							color: #FF70A4;
						}

						.p4 {
							color: #840FFB;
						}

						.p3 {
							color: #FE1515;
						}

						.p2 {
							color: #1EC742;
						}

						.p1 {
							color: #11192D;
						}

						.y {
							color: #979797;
							font-size: 20rpx;
							margin-left: 10rpx;
							font-weight: 400;
							height: 50rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}

		.record {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.l {
				height: 40rpx;
				line-height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 10rpx;
					color: #11192D;
					font-size: 28rpx;
				}
			}

			.r {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.order-top {
			text-align: center;

			.t {

				height: 60rpx;
				line-height: 60rpx;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				text-align: center;

			}

			.p {
				margin-top: 10rpx;
				line-height: 40rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #8E8E8E;
				text-align: center;

				text {
					color: #FF6F07;
				}

			}
		}
	}
</style>